// import React, { useEffect, useState } from 'react';
// import { Divider, Radio, Table, Button } from 'antd';
// import type { ColumnsType } from 'antd/es/table';
// import { connect } from 'react-redux';
// import { Input, Space, Modal } from 'antd';

// export const Sales = ({ api }: any) => {
//   const [isModalOpen, setIsModalOpen] = useState(false);
//   const [DELindex, setindex] = useState('');

//   const handleOk = () => {
//     setIsModalOpen(false);
//     const srr = list.findIndex((item: any) => item.id === DELindex);

//     list.splice(srr, 1);
//     setlist([...list]);
//     console.log(list);
//   };

//   const handleCancel = () => {
//     setIsModalOpen(false);
//   };
//   const [list, setlist] = useState([]);
//   useEffect(() => {
//     api().then((res: any) => {
//       setlist(res.data);
//     });
//   }, []);
//   const [DELitem, setitem] = useState('');
//   const DEL = (item: any, index: any) => {
//     setIsModalOpen(true);
//     setindex(item.id);
//     setitem(item.title);
//   };
//   interface DataType {
//     key: React.Key;
//     name: string;
//     age: number;
//     address: string;
//   }
//   const { Search } = Input;
//   const columns: ColumnsType<DataType> = [
//     {
//       title: 'id',
//       dataIndex: 'id',
//     },
//     {
//       title: '楼盘名称',
//       dataIndex: 'title',
//     },
//     {
//       title: '标题',
//       dataIndex: 'estate_name',
//     },
//     {
//       title: '面积',
//       dataIndex: 'address',
//     },
//     {
//       title: '租金',
//       dataIndex: 'price',
//     },
//     {
//       title: '排序',
//       dataIndex: 'ordid',
//     },
//     {
//       title: '状态',
//       dataIndex: 'status',
//     },
//     {
//       title: '操作',
//       dataIndex: 'caozuo',
//       render: (_, item: any, index: any) => {
//         return (
//           <div>
//             <Button>编辑</Button>
//             <Button
//               onClick={() => {
//                 DEL(item, index);
//               }}
//             >
//               删除
//             </Button>
//           </div>
//         );
//       },
//     },
//   ];

//   const rowSelection = {
//     onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
//       console.log(
//         `selectedRowKeys: ${selectedRowKeys}`,
//         'selectedRows: ',
//         selectedRows,
//       );
//     },
//     getCheckboxProps: (record: DataType) => ({
//       disabled: record.name === 'Disabled User', // Column configuration not to be checked
//       name: record.name,
//     }),
//   };

//   const onSearch = (value: string) => {
//     api().then((res: any) => {
//       const arr = res.data;
//       setlist(arr.filter((item: any) => item.title.includes(value)));
//     });
//   };
//   const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
//     'checkbox',
//   );
//   // console.log(props);

//   return (
//     <div>
//       <div>
//         <Search
//           placeholder="input search text"
//           allowClear
//           enterButton="Search"
//           size="large"
//           style={{ width: '300px' }}
//           onSearch={onSearch}
//         />
//         <Table
//           rowKey="id"
//           rowSelection={{
//             type: selectionType,
//             ...rowSelection,
//           }}
//           columns={columns}
//           dataSource={list}
//         />
//         <Modal
//           title="Basic Modal"
//           open={isModalOpen}
//           onOk={handleOk}
//           onCancel={handleCancel}
//         >
//           <p>
//             你确定要删除<span style={{ color: '#099' }}>{DELitem}</span>么
//           </p>
//         </Modal>
//       </div>
//     </div>
//   );
// };

// export default Sales;

import React, { useState } from 'react';
import { Divider, Radio, Table, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import DEL from './DEL';
import {
  CheckOutlined,
  CloseOutlined,
  LineChartOutlined,
} from '@ant-design/icons';
import { Switch, Space } from 'antd';
import { Tooltip } from 'antd';
import { history } from 'umi';

export default function Sales({ datalist, deltype, flag }: any) {
  interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
  }

  const columns: ColumnsType<DataType> = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: '楼盘名称',
      dataIndex: 'title',
      render: (item, record: any) => {
        return (
          <div>
            {item}
            <Tooltip
              placement="top"
              title={
                <img
                  style={{ width: '100%' }}
                  src={`http://fangadmin.shbwyz.com${record.img}`}
                ></img>
              }
            >
              <LineChartOutlined style={{ margin: '0 10px' }} />
            </Tooltip>
            {record.rec_position === 1 ? (
              <img
                style={{ width: '30px', height: '30px' }}
                src="	http://fangadmin.shbwyz.com/static/images/rec.png"
                alt=""
              />
            ) : (
              ''
            )}
          </div>
        );
      },
    },
    {
      title: '标题',
      dataIndex: 'estate_name',
    },
    {
      title: '面积',
      dataIndex: 'acreage',
      render: (text: any) => <span>{text}m²</span>,
    },
    {
      title: flag ? '租金' : '总价',
      dataIndex: 'price',
      render: (text: any) => {
        return <span>{flag ? `${text}元/月` : `${text}万`}</span>;
      },
    },
    {
      title: '排序',
      dataIndex: 'ordid',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (_, item: any, index: any) => {
        return (
          <div>
            <Switch
              checkedChildren="正常"
              unCheckedChildren="待审"
              defaultChecked={_ === 0 ? false : true}
            />
          </div>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'caozuo',
      render: (_, item: any, index: any) => {
        return (
          <div>
            <Button
              style={{ marginRight: '10px' }}
              onClick={() => {
                goedit(item, item.id);
              }}
            >
              编辑
            </Button>
            <Button
              onClick={() => {
                del(item, index);
              }}
            >
              删除
            </Button>
          </div>
        );
      },
    },
  ];
  const [delmodel, setdelmodel] = useState(false);
  const [delItem, setdelItem] = useState('');
  const [delIndex, setdelIndex] = useState(0);
  const del = (item: any, index: any) => {
    setdelmodel(true);
    setdelItem(item.title);
    setdelIndex(index);
  };
  const closeDel = () => {
    setdelmodel(false);
  };
  // rowSelection object indicates the need for row selection
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );
  // 跳转添加页
  const addFn = () => {
    history.push('/index/commerce/add', {
      state: deltype,
    });
  };
  // 跳转编辑
  const goedit = (item: any, id: any) => {
    // console.log(id)
    history.push('/index/commerce/edit', {
      state: { item, deltype, id },
    });
  };
  return (
    <div>
      <div>
        <Button type="primary" style={{ margin: '20px' }} onClick={addFn}>
          添加
        </Button>
        <Table
          rowKey="id"
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          columns={columns}
          dataSource={datalist}
        />
        <DEL
          delmodel={delmodel}
          delItem={delItem}
          closeDel={closeDel}
          delIndex={delIndex}
          deltype={deltype}
        ></DEL>
      </div>
    </div>
  );
}
